<template>
  <div class="comWithdrawSelectCoin_container pr-1 pl-1" v-if="visible">
		<div class="com_top_navBar">
			<van-nav-bar
				left-arrow
				@click-left="onClickLeft"
			>
			</van-nav-bar>
		</div>
		<div class="comWithdrawSelectCoin_container_content">
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell v-for="(item , index) in radioList" :key="index" clickable @click="clickCell(item)">
						<template #right-icon>
							<van-radio :name="item.id" :disabled="item.id != radio" />
						</template>
						<template #title>
							<img :src="item.image" alt="">
							<span class="custom-title">{{ item.name }}</span>
						</template>
					</van-cell>
				</van-cell-group>
			</van-radio-group>
		</div>
	</div>
</template>

<script>
import BusinessUtils from '@/utils/business';

export default {
	name: "ComWithdrawSelectCoin",
	props:{
		visible:{
			type:Boolean,
			default:false
		},
		atPresent:'',
        coinsList:[],
	},
	data(){
		return {
			radio:'',
			radioList : [
				{
					id:1,
					name: 'USDT',
					image: BusinessUtils.getCoinIcon("USDT")
				},
				{
					id:2,
					name: 'USDC',
					image: BusinessUtils.getCoinIcon("USDC")
				},
                {
					id:4,
					name: 'SUSD',
					image: BusinessUtils.getCoinIcon("SUSD")
				},
				{
					id:3,
					name: 'SAT',
					image: BusinessUtils.getCoinIcon("SAT")
				},
				
			],
		}
	},
	mounted(){
        
	},
	watch: {
    visible(newVal) {
      if (newVal) {
        this.disposeRadioData();
        this.geiInfo()
      }
    }
  },
	methods:{
        disposeRadioData(){
            this.radioList = [];
            for(let i = 0; i < this.coinsList.length; i++){
                let item = this.coinsList[i];
                let radioItem = {}
                radioItem.id = item.id;
                radioItem.name = item.name;
                radioItem.image = BusinessUtils.getCoinIcon(item.name)
                this.radioList.push(radioItem);
            }
        },

		geiInfo(){
			if(this.atPresent){
				let arr = this.radioList.filter(item => item.name == this.atPresent)

				this.radio = arr[0].id
			}
		},
		onClickLeft(){
			this.$emit('close')
		},
		clickCell(item){
			this.radio = item.id
			this.$emit('criminal', item)	
		}
	}
};
</script>

<style lang="less">
@import "./index.less";
</style>